import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

export default new Vuex.Store({
  plugins:[createPersistedState()],
  state: {
    todos:JSON.parse(localStorage.getItem("vuex")||'[]'),
    activeTab:"all",
  },
  getters:{
    filterTodos:function(state){
      if(state.activeTab === "all"){
        return state.todos
      }else if(state.activeTab === "active"){
        return state.todos.filter(v=>{
          return !v.status
        })
      }else if(state.activeTab === "complate"){
        return state.todos.filter(v=>{
          return v.status
        })
      }
    },
    allChecked:function(state){
      let checked = true;
      state.todos.map((v)=>{
        if(!v.status) checked = false;
      });
      return checked;
    },
    remaining:function(state){
      let remainingTodos = state.todos.filter(v=>{
        return !v.status
       
      })
       return remainingTodos.length
    },
    activeTab:function(state){
      return state.activeTab;
    }
  },
  mutations: {
    addTodo:function(state,{payload}){
      state.todos.push(payload);  
    },
    allCheckClick:function (state) {
      let newTodos = JSON.parse(JSON.stringify(state.todos));
      newTodos.map((v) => {
        v.status = true;
      });
      state.todos = newTodos;
    },
    clearTodo: function (state,{payload}) {
      state.todos.splice(payload.index, 1);
    },
    changeActiveTab:function(state,{payload}){
      state.activeTab = payload.activeTab;
    },
    clearComplate:function(state){
      let activeTodos = state.todos.filter((v) => {
          return !v.status;
        });
        state.todos = activeTodos;
    },
  },
  actions: {
  },
  modules: {
  }
})
